<template>
	<view class="dish-detail-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<text class="nav-title">菜品详情</text>
		</view>

		<!-- 菜品内容区域 -->
		<scroll-view class="dish-content" scroll-y="true">
			<!-- 菜品图片轮播 -->
			<view class="swiper-section">
				<swiper class="dish-swiper" indicator-dots="true" autoplay="false" interval="5000" duration="500">
					<swiper-item>
						<image :src="dish.image" mode="aspectFill" class="dish-main-image"></image>
					</swiper-item>
					<!-- 可以添加更多图片 -->
				</swiper>
				<view class="image-count" v-if="false">1/3</view>
			</view>

			<!-- 菜品基本信息 -->
			<view class="dish-info-card">
				<view class="price-section">
					<text class="current-price">¥{{ dish.price }}</text>
					<text class="original-price" v-if="dish.originalPrice">¥{{ dish.originalPrice }}</text>
					<text class="sales-count" v-if="dish.sales">已售{{ dish.sales }}份</text>
				</view>
				<text class="dish-name">{{ dish.name }}</text>
				<text class="dish-desc" v-if="dish.description">{{ dish.description }}</text>

				<view class="promotion-tags" v-if="false">
					<text class="tag">限时优惠</text>
					<text class="tag">48小时发货</text>
				</view>
			</view>

			<!-- 服务承诺 -->
			<view class="service-promise">
				<view class="service-item">
					<text class="service-icon">✓</text>
					<text class="service-text">正品保证</text>
				</view>
				<view class="service-item">
					<text class="service-icon">✓</text>
					<text class="service-text">48小时发货</text>
				</view>
				<view class="service-item">
					<text class="service-icon">✓</text>
					<text class="service-text">7天无理由</text>
				</view>
			</view>

			<!-- 选择规格 -->
			<view class="spec-section" @click="toggleSpecPanel">
				<text class="spec-label">已选</text>
				<text class="spec-value">{{ quantity }}件</text>
				<text class="arrow">›</text>
			</view>

			<!-- 商品详情 -->
			<view class="detail-section">
				<view class="section-title">
					<text>商品详情</text>
				</view>
				<view class="detail-content">
					<text class="detail-item" v-if="dish.categoryId">
						<text class="detail-label">分类：</text>
						<text class="detail-value">{{ categoryName }}</text>
					</text>
					<text class="detail-item">
						<text class="detail-label">库存：</text>
						<text class="detail-value">充足</text>
					</text>
				</view>
			</view>

			<!-- 评论区预览 -->
			<view class="comment-preview" v-if="false">
				<view class="section-title">
					<text>用户评价(25)</text>
					<text class="view-all">查看全部 ›</text>
				</view>
				<view class="comment-item">
					<image src="/static/avatar.png" class="user-avatar"></image>
					<view class="comment-content">
						<text class="user-name">用户1234</text>
						<text class="comment-text">味道很好，下次还会再买！</text>
						<text class="comment-date">2023-11-15</text>
					</view>
				</view>
			</view>

			<!-- 推荐商品 -->
			<view class="recommend-section" v-if="false">
				<view class="section-title">
					<text>猜你喜欢</text>
				</view>
				<scroll-view class="recommend-list" scroll-x="true">
					<view class="recommend-item" v-for="i in 4" :key="i">
						<image src="/static/default-dish.png" class="recommend-image"></image>
						<text class="recommend-name">推荐菜品{{ i }}</text>
						<text class="recommend-price">¥{{ 20 + i }}</text>
					</view>
				</scroll-view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="action-bar">
			<view class="action-icons">
				<view class="icon-item" @click="goHome">
					<text class="icon">⌂</text>
					<text class="icon-text">首页</text>
				</view>
				<view class="icon-item" @click="viewCart">
					<text class="icon">🛒</text>
					<text class="icon-text">购物车</text>
					<text class="cart-badge" v-if="totalCartQuantity > 0">{{ totalCartQuantity }}</text>
				</view>
				<view class="icon-item" @click="addToFavorites">
					<text class="icon">❤</text>
					<text class="icon-text">收藏</text>
				</view>
			</view>
			<view class="action-buttons">
				<view class="add-cart-btn" @click="addToCart">加入购物车</view>
				<view class="buy-now-btn" @click="buyNow">立即购买</view>
			</view>
		</view>

		<!-- 规格选择面板 -->
		<view class="spec-panel" :class="{ active: specPanelVisible }">
			<view class="panel-header">
				<image :src="dish.image " class="panel-image"></image>
				<view class="panel-info">
					<text class="panel-price">¥{{ dish.price }}</text>
					<text class="panel-stock">库存充足</text>
					<text class="panel-spec">已选：{{ quantity }}件</text>
				</view>
				<view class="panel-close" @click="closeSpecPanel">×</view>
			</view>
			<view class="panel-body">
				<view class="spec-group">
					<text class="spec-title">数量</text>
					<view class="quantity-control">
						<text class="control-btn minus" :class="{ disabled: quantity <= 1 }" @click="decrease">-</text>
						<text class="quantity-number">{{ quantity }}</text>
						<text class="control-btn plus" @click="increase">+</text>
					</view>
				</view>
			</view>
			<view class="panel-footer">
				<view class="confirm-btn" @click="confirmSpec">确定</view>
			</view>
		</view>

		<!-- 遮罩层 -->
		<view class="mask" :class="{ active: specPanelVisible }" @click="closeSpecPanel"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dishId: null, // 菜品ID
				dish: {
					name: "加载中...",
					price: 0,
					image: "",
					categoryId: null,
					description: ""
				}, // 菜品详情
				categories: [], // 分类列表
				quantity: 1, // 当前选择数量
				cartItems: [], // 购物车商品
				specPanelVisible: false, // 规格面板是否可见
				totalCartQuantity: 0 // 购物车总数量
			}
		},
		computed: {
			// 获取分类名称
			categoryName() {
				if (!this.dish.categoryId) return '加载中...'
				const category = this.categories.find(c => c.id === this.dish.categoryId)
				return category ? category.name : '未知分类'
			}
		},
		methods: {
			// 统一的请求方法
			async request(url, method = 'GET', data = {}) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'http://localhost:8080' + url,
						method,
						data,
						header: {
							'Content-Type': 'application/json'
						},
						success: (res) => {
							resolve(res.data)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},

			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			// 去首页
			goHome() {
				uni.switchTab({
					url: '/pages/main/main'
				})
			},

			// 查看购物车
			viewCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},

			// 分享
			share() {
				uni.showToast({
					title: '分享功能准备中',
					icon: 'none'
				})
			},

			// 添加到收藏
			addToFavorites() {
				uni.showToast({
					title: '已添加到收藏',
					icon: 'success'
				})
			},

			// 加载菜品详情
			async loadDishDetail() {
				try {
					const res = await this.request('/dish/getById', 'POST', {
						id: this.dishId
					})
					if (res.code === 200) {
						this.dish = res.data
					} else {
						uni.showToast({
							title: '加载菜品详情失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('加载菜品详情失败:', error)
					uni.showToast({
						title: '加载菜品详情失败',
						icon: 'none'
					})
				}
			},

			// 加载分类数据
			async loadCategories() {
				try {
					const res = await this.request('/category/list')
					if (res.code === 200) {
						this.categories = res.data || []
					}
				} catch (error) {
					console.error('加载分类失败:', error)
				}
			},

			// 增加数量
			increase() {
				this.quantity++
			},

			// 减少数量
			decrease() {
				if (this.quantity > 1) {
					this.quantity--
				}
			},

			// 打开规格面板
			toggleSpecPanel() {
				this.specPanelVisible = true
			},

			// 关闭规格面板
			closeSpecPanel() {
				this.specPanelVisible = false
			},

			// 确认规格选择
			confirmSpec() {
				this.closeSpecPanel()
			},

			// 添加到购物车
			addToCart() {
				// 查找购物车中是否已有该菜品
				const existingIndex = this.cartItems.findIndex(item => item.id === this.dish.id)

				if (existingIndex !== -1) {
					// 更新已有菜品的数量
					this.cartItems[existingIndex].quantity += this.quantity
				} else {
					// 添加新菜品到购物车
					this.cartItems.push({
						...this.dish,
						quantity: this.quantity,
						selected: true
					})
				}

				// 保存到本地存储
				this.saveCartToStorage()

				uni.showToast({
					title: '已添加到购物车',
					icon: 'success'
				})

				// 更新购物车总数量
				this.updateCartTotal()

				// 重置数量
				this.quantity = 0
			},

			// 立即购买
			buyNow() {
				this.addToCart()
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/cart/cart'
					})
				}, 800)
			},

			// 保存购物车到本地存储
			saveCartToStorage() {
				uni.setStorageSync('cartItems', this.cartItems)
			},

			// 从本地存储加载购物车
			loadCartFromStorage() {
				const savedCart = uni.getStorageSync('cartItems')
				if (savedCart) {
					this.cartItems = savedCart
					this.updateCartTotal()

					// 设置当前菜品的数量
					const existingItem = this.cartItems.find(item => item.id === this.dish.id)
					if (existingItem) {
						this.quantity = existingItem.quantity
					}
				}
			},

			// 更新购物车总数量
			updateCartTotal() {
				this.totalCartQuantity = this.cartItems.reduce((total, item) => total + item.quantity, 0)
			}
		},
		onLoad(options) {
			// 获取传递的菜品ID
			this.dishId = options.dishId

			if (this.dishId) {
				this.loadDishDetail()
				this.loadCategories()
				this.loadCartFromStorage()
			} else {
				uni.showToast({
					title: '菜品信息错误',
					icon: 'none'
				})
				setTimeout(() => {
					this.goBack()
				}, 1500)
			}
		},
		onShow() {
			// 页面显示时刷新购物车数据
			this.loadCartFromStorage()
		}
	}
</script>

<style lang="scss" scoped>
	.dish-detail-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f4f4f4;
	}

	/* 导航栏样式 */
	.nav-bar {
		height: 90rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		position: relative;
		padding: 0 20rpx;
		box-sizing: border-box;
		z-index: 10;

		.nav-back {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.back-icon {
				font-size: 48rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.nav-title {
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			flex: 1;
			color: #333;
		}

		.nav-actions {
			.action-icon {
				font-size: 40rpx;
				padding: 10rpx;
			}
		}
	}

	/* 内容区域 */
	.dish-content {
		flex: 1;
		background-color: #f4f4f4;
	}

	/* 轮播图区域 */
	.swiper-section {
		position: relative;
		background-color: #fff;
		height: 350rpx;

		.dish-swiper {
			height: 100%;

			.dish-main-image {
				width: 100%;
				height: 100%;
			}
		}

		.image-count {
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
			background-color: rgba(0, 0, 0, 0.4);
			color: #fff;
			padding: 8rpx 16rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
		}
	}

	/* 菜品信息卡片 */
	.dish-info-card {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.price-section {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.current-price {
				font-size: 48rpx;
				color: #ff5000;
				font-weight: bold;
				margin-right: 20rpx;
			}

			.original-price {
				font-size: 28rpx;
				color: #999;
				text-decoration: line-through;
				margin-right: 20rpx;
			}

			.sales-count {
				font-size: 24rpx;
				color: #999;
			}
		}

		.dish-name {
			display: block;
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			line-height: 1.4;
		}

		.dish-desc {
			display: block;
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 20rpx;
		}

		.promotion-tags {
			display: flex;
			flex-wrap: wrap;

			.tag {
				background-color: #fff2f0;
				color: #ff5000;
				padding: 8rpx 16rpx;
				border-radius: 8rpx;
				font-size: 22rpx;
				margin-right: 16rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	/* 服务承诺 */
	.service-promise {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;

		.service-item {
			display: flex;
			align-items: center;

			.service-icon {
				color: #ff5000;
				margin-right: 10rpx;
				font-size: 24rpx;
			}

			.service-text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	/* 规格选择 */
	.spec-section {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		position: relative;

		.spec-label {
			font-size: 28rpx;
			color: #666;
			margin-right: 20rpx;
		}

		.spec-value {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		.arrow {
			font-size: 36rpx;
			color: #ccc;
			transform: rotate(90deg);
		}

		&::after {
			content: '';
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: 0;
			height: 1rpx;
			background-color: #eee;
		}
	}

	/* 详情区域 */
	.detail-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: -30rpx;
				top: 0;
				width: 8rpx;
				height: 100%;
				background-color: #ff5000;
			}
		}

		.detail-content {
			.detail-item {
				display: block;
				font-size: 28rpx;
				color: #666;
				margin-bottom: 15rpx;

				.detail-label {
					color: #999;
				}

				.detail-value {
					color: #333;
				}
			}
		}
	}

	/* 评论区预览 */
	.comment-preview {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.section-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.view-all {
				font-size: 26rpx;
				color: #999;
			}
		}

		.comment-item {
			display: flex;

			.user-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.comment-content {
				flex: 1;

				.user-name {
					display: block;
					font-size: 26rpx;
					color: #999;
					margin-bottom: 10rpx;
				}

				.comment-text {
					display: block;
					font-size: 28rpx;
					color: #333;
					margin-bottom: 10rpx;
					line-height: 1.4;
				}

				.comment-date {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}

	/* 推荐区域 */
	.recommend-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 120rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}

		.recommend-list {
			white-space: nowrap;

			.recommend-item {
				display: inline-block;
				width: 200rpx;
				margin-right: 20rpx;

				.recommend-image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
				}

				.recommend-name {
					display: block;
					font-size: 26rpx;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 10rpx;
				}

				.recommend-price {
					font-size: 28rpx;
					color: #ff5000;
					font-weight: bold;
				}
			}
		}
	}

	/* 底部操作栏 */
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eee;
		padding: 0 20rpx;
		box-sizing: border-box;
		z-index: 10;

		.action-icons {
			display: flex;
			align-items: center;
			margin-right: 20rpx;

			.icon-item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 80rpx;
				height: 80rpx;

				.icon {
					font-size: 40rpx;
					margin-bottom: 5rpx;
				}

				.icon-text {
					font-size: 20rpx;
					color: #666;
				}

				.cart-badge {
					position: absolute;
					top: 5rpx;
					right: 5rpx;
					background-color: #ff5000;
					color: #fff;
					border-radius: 50%;
					width: 36rpx;
					height: 36rpx;
					text-align: center;
					line-height: 36rpx;
					font-size: 20rpx;
				}
			}
		}

		.action-buttons {
			flex: 1;
			display: flex;
			justify-content: flex-end;

			.add-cart-btn {
				background-color: #ff9500;
				color: #fff;
				padding: 0 40rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				font-size: 30rpx;
				margin-right: 20rpx;
			}

			.buy-now-btn {
				background-color: #ff5000;
				color: #fff;
				padding: 0 40rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				font-size: 30rpx;
			}
		}
	}

	/* 规格选择面板 */
	.spec-panel {
		position: fixed;
		bottom: -1000rpx;
		left: 0;
		right: 0;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		z-index: 100;
		transition: bottom 0.3s ease;

		&.active {
			bottom: 0;
		}

		.panel-header {
			display: flex;
			padding: 30rpx;
			position: relative;
			border-bottom: 1rpx solid #eee;

			.panel-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.panel-info {
				flex: 1;

				.panel-price {
					display: block;
					font-size: 36rpx;
					color: #ff5000;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.panel-stock {
					display: block;
					font-size: 24rpx;
					color: #999;
					margin-bottom: 10rpx;
				}

				.panel-spec {
					display: block;
					font-size: 24rpx;
					color: #333;
				}
			}

			.panel-close {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				font-size: 40rpx;
				color: #999;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.panel-body {
			padding: 30rpx;

			.spec-group {
				margin-bottom: 30rpx;

				.spec-title {
					display: block;
					font-size: 28rpx;
					color: #666;
					margin-bottom: 20rpx;
				}

				.quantity-control {
					display: flex;
					align-items: center;

					.control-btn {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background-color: #f0f0f0;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 36rpx;
						font-weight: bold;

						&.plus {
							background-color: #ff5000;
							color: #fff;
						}

						&.minus {
							color: #666;

							&.disabled {
								opacity: 0.5;
							}
						}
					}

					.quantity-number {
						font-size: 32rpx;
						font-weight: bold;
						min-width: 80rpx;
						text-align: center;
					}
				}
			}
		}

		.panel-footer {
			padding: 30rpx;

			.confirm-btn {
				background-color: #ff5000;
				color: #fff;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

	/* 遮罩层 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 90;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;

		&.active {
			opacity: 1;
			visibility: visible;
		}
	}
</style>